<template>
    <div class="phone">
        <div class="marvel-device iphone5s silver">
            <div class="top-bar"></div>
            <div class="sleep"></div>
            <div class="volume"></div>
            <div class="camera"></div>
            <div class="sensor"></div>
            <div class="speaker"></div>
            <div class="screen">
                <div :style="{
                    width: width + 'px',
                    height: height + 'px',
                }" v-if="!custom">
                    <img class="image" v-img :src="this.image" />
                </div>
                <slot v-else >

                </slot>

            </div>
            <div class="home"></div>
            <div class="bottom-bar"></div>
        </div>
    </div>
</template>

<script lang="ts">

    import {Vue, Component, Prop} from 'vue-property-decorator'

    @Component({
        name:"AdminDevice"
    })
    export default class AdminDevice extends Vue{

        @Prop({
            required:false,
            type:Number
        })
        width;

        @Prop({
            required:false,
            type:Number
        })
        height;

        @Prop({
            required:false,
            type:String
        })
        image;

        @Prop({
            required:false,
            type:Boolean,
            default:false
        }) custom;





    }
</script>

<style lang="scss" scoped>
    .phone {
        display: flex;
        justify-content: center;
        padding-top: 20px;
    }

    .image {
        width: 100%;
        height: 100%;
    }
    .editable {
        padding-top: 20px;
    }
</style>